<template>
  <div id="page-activity">
    <!-- 查询 -->
    <div class="page-search-list">
      <el-form
        label-position="left"
        :model="search_form"
        :inline="true"
        ref="healthFromRef"
      >
        <el-form-item
          v-for="(item, i) in search_info"
          :label="item.label"
          :key="i"
          style="margin-bottom: 5px;"
        >
          <template v-if="item.prop === 'start_time'">
            <template v-if="!is_time_period">
              <el-date-picker
                type="dates"
                v-model="search_form.time"
                placeholder="选择一个或多个日期"
                key="time"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                v-model="search_form.time_period"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                key="time_period"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
          </template>
          <template v-else-if="item.prop === 'cid'">
            <select-community
              :cid.sync="search_form[item.prop]"
              :pid.sync="search_form.pid"
              :bid.sync="search_form.bid"
              :sidVisiabel="false"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'status'">
            <el-select
              v-model="search_form[item.prop]"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in activity_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input
              v-model="search_form[item.prop]"
              size="small"
              :placeholder="`请输入${item.label}`"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-search" size="small" @click.native="search">
            搜索
          </el-button>
          <el-button
            type="primary"
            class="el-icon-refresh"
            size="small"
            @click.native="resetSearchFields"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="page-botton-list">
      <el-button
        plain
        class="el-icon-date"
        size="mini"
        @click.native="is_time_period = !is_time_period"
      >
        {{ is_time_period ? '时间查询' : '时间段查询' }}
      </el-button>
      <el-button
        type="warning"
        plain
        class="el-icon-plus"
        size="mini"
        @click="addActivity"
        key="add_button"
      >
        新增活动
      </el-button>
      <el-button
        type="danger"
        plain
        class="el-icon-delete"
        size="mini"
        :disabled="is_delete"
        @click="deleteActivity"
        key="delete_arr_button"
      >
        删除
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="page-table">
      <el-table
        :data="activity_table"
        style="width: 100%;"
        id="activity_tableId"
        @selection-change="selectTabel"
      >
        <el-table-column type="selection" />
        <el-table-column
          v-for="(column, i) in tableInfo"
          :key="i"
          :label="column.label"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.prop === 'content'">
              <el-link type="primary" @click="setDetailDialog(scope.row, 2)">
                查看详情
              </el-link>
            </template>
            <template v-else-if="column.prop === 'time'">
              <el-tag type="info" v-for="time in scope.row[column.prop]">
                {{ time }}
              </el-tag>
            </template>
            <template v-else>{{ scope.row[column.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="scope">
            <el-button
              type="warning"
              plain
              size="mini"
              class="el-icon-delete"
              @click="deleteActivity(scope.row.id, scope.row.title)"
            >
              删除
            </el-button>
            <el-button
              plain
              type="primary"
              size="mini"
              class="el-icon-edit"
              @click="setDetailDialog(scope.row, 1)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageCount"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tatal"
        class="upload-list-pagination"
      ></el-pagination>
    </div>

    <!-- 添加/修改/查看 弹窗 -->
    <el-dialog
      :title="
        dialog_status === 0
          ? '新增志愿活动'
          : dialog_status === 1
          ? '修改志愿活动'
          : '查看志愿详情'
      "
      :visible.sync="activity_dialog_visible"
      :append-to-body="true"
      width="40%"
    >
      <el-form
        :model="activity_dialog"
        label-position="left"
        :rules="rules"
        ref="activityTableRef"
      >
        <el-form-item
          v-for="(item, i) in dialog_info"
          :key="i"
          :label="item.label"
          :prop="item.prop"
          label-width="80px"
        >
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="activity_dialog[item.prop]"
              :pid.sync="activity_dialog.pid"
              :bid.sync="activity_dialog.bid"
              :sidVisiabel="false"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'content'">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请输入内容"
              v-model="activity_dialog.content"
            ></el-input>
          </template>
          <template v-else-if="item.prop === 'time'">
            <el-date-picker
              v-model="activity_dialog[item.prop]"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="samll"
              style="width: 100%; height: 32px;"
            ></el-date-picker>
          </template>
          <template v-else-if="item.prop === 'volunteer'">
            <el-form>
              <ul class="volunteer-ul" style="justify-content: space-around;">
                <span>编号</span>
                <span>名称</span>
                <span>岗位</span>
              </ul>
              <ul
                class="volunteer-ul"
                v-for="user in activity_dialog[item.prop]"
              >
                <el-form-item>
                  <el-input class="volunteer-li" v-model="user.uid"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    class="volunteer-li"
                    v-model="user.uname"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input class="volunteer-li" v-model="user.job"></el-input>
                </el-form-item>
              </ul>
            </el-form>
            <el-button
              v-if="activity_dialog.status !== 2"
              type="primary"
              plain
              style="margin-top: 5px; width: 100%;"
              @click="inner_visible = true"
            >
              添加志愿者
            </el-button>
          </template>
          <template v-else-if="item.prop === 'status'">
            <el-select
              v-model="activity_dialog.status"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in activity_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input
              v-model="activity_dialog[item.prop]"
              size="small"
            ></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="addClick">
          {{
            dialog_status === 0
              ? '确定添加'
              : dialog_status === 1
              ? '确定修改'
              : '修改'
          }}
        </el-button>
      </div>
      <el-dialog
        append-to-body
        width="40%"
        title="添加志愿者"
        :visible.sync="inner_visible"
      >
        <el-form
          label-width="80px"
          ref="innerRef"
          :model="temp_user"
          :rules="temp_user_rules"
        >
          <el-form-item label="编号" prop="id">
            <el-input class="volunteer-li" v-model="temp_user.uid"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input class="volunteer-li" v-model="temp_user.uname"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="job">
            <el-input class="volunteer-li" v-model="temp_user.job"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="inner_visible = false">取 消</el-button>
          <el-button type="primary" @click="checkInner">
            确定增加
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="delete_dialog_visible"
      width="30%"
      center
      :append-to-body="true"
    >
      <div style="text-align: center;">
        是否删除以下志愿活动
        <li v-for="(item, i) in delete_user_arr" :key="i">
          {{ i + 1 + '.' + item.title + `（${item.id}）` }}
        </li>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="falsedeleteActivity">取 消</el-button>
        <el-button type="primary" @click="truedeleteActivity">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { rules } from '@/utils/rules'
// 工具类
import { isNull } from '@/utils/tool.js'
export default {
  computed: {
    is_delete() {
      return !this.multiple_selection.length > 0
    },
  },
  watch: {
    search_form: {
      handler(val) {
        console.log(val)
      },
    },
    activity_dialog_visible: {
      handler(val) {
        if (!val) {
          this.activity_dialog = {
            title: '',
            content: '',
            cid: '',
            pid: '',
            bid: '',
            sid: '',
            time: '',
            volunteer: [],
          }
          this.inner_visible = false
          if (this.$refs.activityTableRef)
            this.$refs.activityTableRef.resetFields()
        }
      },
    },
    'activity_dialog.status': {
      handler(val) {
        if (typeof val !== 'number') {
          this.activity_dialog.status = Number(val)
        }
      },
    },
    inner_visible: {
      handler(val) {
        if (!val) {
          this.temp_user = {
            uid: '',
            uname: '',
            job: '',
          }
        }
      },
      immediate: true,
    },
    delete_dialog_visible: {
      handler(val) {
        if (!val) {
          this.delete_user_arr = []
        }
      },
    },
  },
  data() {
    return {
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
      activity_status: [
        { value: 0, label: '待开始' },
        { value: 1, label: '进行中' },
        { value: 2, label: '结束' },
      ],
      // 查询信息
      search_form: {
        cid: '',
        pid: '',
        bid: '',
        name: '',
        time: [],
        time_period: [],
        admin_id: '',
        status: '',
      },
      search_info: {
        cid: { label: '社区', prop: 'cid' },
        name: { label: '活动名称', prop: 'name' },
        admin_id: { label: '发起人编号', prop: 'admin_id' },
        start_time: { label: '发布日期', prop: 'start_time' },
        status: { label: '活动状态', prop: 'status' },
      },
      is_time_period: false, // 是否以时间段查询
      tableInfo: {
        id: { label: '编号', prop: 'id' },
        cid: { label: '社区', prop: 'cid' },
        title: { label: '活动标题', prop: 'title' },
        content: { label: '活动内容', prop: 'content' },
        admin_id: { label: '发起人编号', prop: 'admin_id' },
        address: { label: '活动地址', prop: 'address' },
        time: { label: '活动时间', prop: 'time' },
      },
      activity_table: [
        {
          id: 1688,
          cid: '滨海小区3期',
          title: '物资配送志愿活动',
          content: {
            description: '根据求助名单将疫情救助物资配送给对应的居民',
            volunteer: [
              { uid: 1230, uname: '张三', job: '配送物资' },
              { uid: 1281, uname: '李四', job: '配送物资' },
              { uid: 1630, uname: '赵武', job: '统计物资' },
              { uid: 1813, uname: '路人甲', job: '配送物资' },
            ],
          },
          admin_id: 153,
          address: '滨海小区3期',
          time: ['2022-5-6 10:00:00', '2022-5-6 16:00:00'],
          status: 0,
        },
      ],
      multiple_selection: [], // 表格选择
      activity_dialog_visible: false, // 弹窗是否可见
      activity_dialog: {
        title: '',
        content: '',
        cid: '',
        pid: '',
        bid: '',
        sid: '',
        time: '',
        volunteer: [],
        status: '',
      },
      dialog_info: {
        title: { label: '标题', prop: 'title' },
        content: { label: '内容', prop: 'content' },
        cid: { label: '活动社区', prop: 'cid' },
        time: { label: '活动时间', prop: 'time' },
        volunteer: { label: '志愿者', prop: 'volunteer' },
        status: { label: '活动状态', prop: 'status' },
      },
      // 志愿者
      temp_user: {
        uid: '',
        uname: '',
        job: '',
      },
      inner_visible: false,
      delete_dialog_visible: false, //删除弹窗是否可见
      delete_user_arr: [], // 删除的用户数组
      content_data: {},
      dialog_status: null, // 0新增 1修改 2查看
      rules: {
        ...rules,
        title: [{ required: true, message: '请选择输入标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入活动内容', trigger: 'blur' },
        ],
        time: [{ required: true, message: '请选择时间', trigger: 'blur' }],
      },
      temp_user_rules: {
        id: [{ required: true, message: '请输入志愿者编号', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入志愿者姓名', trigger: 'blur' },
        ],
        job: [{ required: true, message: '请输入志愿者职称', trigger: 'blur' }],
      },
    }
  },
  created() {},
  methods: {
    /* 请求 */
    /* DOM 操作 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 搜索
    search() {
      console.log(this.search_form)
      const data = this.travelFrm
    },
    // 清空搜索条件
    resetSearchFields() {
      this.search_form = {
        cid: '',
        pid: '',
        bid: '',
        name: '',
        time: [],
        time_period: [],
        admin_id: '',
        status: '',
      }
    },
    // 表格选择
    selectTabel(val) {
      this.multiple_selection = val
      console.log(this.multiple_selection)
    },
    // 新增活动
    addActivity() {
      this.activity_dialog_visible = true
      this.dialog_status = 0
    },
    // 新增志愿者
    checkInner() {
      this.$refs['innerRef'].validate((valid) => {
        if (valid) {
          activity_dialog.volunteer.push(temp_user)
          inner_visible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击 确定 最外层弹窗
    addClick() {
      this.activity_dialog_visible = false
      console.log(this.activity_dialog)
      this.$message({
        message: '成功',
        type: 'success',
      })
    },
    // 点击 取消 最外弹窗
    cancelDialog() {
      this.activity_dialog_visible = false
    },
    // 删除
    deleteActivity(id, title) {
      this.delete_dialog_visible = true
      if (isNull(id) && typeof id !== 'object') {
        // 单个删除
        let activity = {
          id,
          title,
        }
        this.delete_user_arr.push(activity)
        console.log('删除单个')
      } else {
        this.multiple_selection.forEach((item) => {
          let activity = {
            id: item.id,
            title: item.title,
          }
          this.delete_user_arr.push(activity)
        })
        console.log('删除数组')
      }
      console.log(this.delete_user_arr)
    },
    falsedeleteActivity() {
      this.delete_dialog_visible = false
      this.$message('已取消删除')
    },
    truedeleteActivity() {
      this.delete_dialog_visible = false
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    setDetailDialog(row, status) {
      this.activity_dialog_visible = true
      this.dialog_status = status
      let keys = Object.keys(row)
      for (let k in this.activity_dialog) {
        if (keys.includes(k)) {
          console.log(k, this.activity_dialog)
          if (k === 'content') {
            this.activity_dialog[k] = JSON.parse(
              JSON.stringify(row[k].description),
            )
            this.activity_dialog.volunteer = JSON.parse(
              JSON.stringify(row[k].volunteer),
            )
          } else {
            this.activity_dialog[k] = row[k]
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
#page-activity {
  padding: 0 0.5rem;
  .page-table {
    .el-button {
      margin: 2px 0;
    }
  }
  .el-collapse-title-div {
    display: flex;
    justify-content: space-around;
    width: 90%;
  }
  .el-form-ul {
    min-height: 2.375rem;
    border: 1px solid #dcdfe6;
  }
  /deep/.el-collapse {
    border: none;
    background-color: rgba(255, 255, 255, 0);
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
}
.page-botton-list {
  margin-bottom: 0.625rem;
}
.ul-address-date {
  display: flex;
  .ul-address-date-item {
    flex: 1;
    margin-right: 1.25rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
/deep/.el-select {
  width: 100%;
}
.address-tag {
  margin-right: 0.625rem;
  &:last-child {
    margin-right: 0;
  }
}
.upload-list-pagination {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}

.volunteer-ul {
  display: flex;
  /deep/input {
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    text-align: center;
  }
}
</style>
